<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Course Evaluation DAPP Demo</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
          integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <style>
        .margin-top-1 {
            margin-top: 1em;
        }
    </style>
</head>

<body class="container">
<h2 style="text-align:center">Course Evaluation DAPP Demo</h2>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#sectionA" id="home_tab"><i class="fa fa-university"></i> 评课平台</a>
    </li>
    <li><a data-toggle="tab" href="#sectionB" id="account_tab"><i class="fa fa-user"></i> 我的账户</a>
    </li>
    <li><a data-toggle="tab" href="#sectionC" id="class_tab"><i class="fa fa-search"></i> 评论查询</a>
    </li>
    <li><a data-toggle="tab" href="#sectionD" id="admin_tab"><i class="fa fa-star"></i> 管理员</a>
    </li>
</ul>
<div class="tab-content">
    <div id="sectionA" class="tab-pane fade in active">
        <div class="panel panel-primary margin-top-1">
            <div class="panel-heading">
                <h3 class="panel-title">平台信息</h3>
            </div>
            <div class="panel-body">
                <table class="table table-striped">
                    <tbody>
                    <tr>
                        <td>平台地址</td>
                        <td id="plantformAccount"></td>
                    </tr>
                    <tr>
                        <td>平台打赏</td>
                        <td id="plantformBalance">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">已注册用户</h3>
            </div>
            <div class="panel-body">
                <div>
                    <table class="table table-striped">
                        <tr>
                            <td>id</td>
                            <td>name</td>
                            <td>Address</td>
                        </tr>
                        <tbody id="accountList">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        </hr>
        <div class="panel panel-primary text-center">
            <div class="panel-heading">
                <h3 class="panel-title">注册账户</h3>
            </div>
            <div class="panel-body">
                <table class="table table-striped">
                    <tbody>
                    <tr>
                        <td style="text-align:left">account name</td>
                        <td>
                            <input type="text" class="form-control" id="accountName"
                                   placeholder="account name">
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:left">account address</td>
                        <td>
                            <input type="text" class="form-control" id="accountAddress"
                                   placeholder="account address">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2">
                            <button id="registerBtn" class="btn btn-primary">注册</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div id="sectionB" class="tab-pane fade">
        <div class="panel panel-primary margin-top-1">
            <div class="panel-heading">
                <h3 class="panel-title">账户信息</h3>
            </div>
            <div class="panel-body">
                <div>
                    登录账户
                    <input id="loginAddress" type="text">
                    <button id="loginBtn">登录</button>
                     </div>
                     <br>
                <table class="table table-striped">
                    <tbody>
                    <tr>
                        <td>昵称</td>
                        <td id="myName"></td>
                    </tr>
                    <tr>
                        <td>账户地址</td>
                        <td id="myAccount"></td>
                    </tr>
                    <tr>
                        <td>打赏</td>
                        <td id="myBalance">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">发评价</h3>
            </div>
            <div class="panel-body">
                <div>
                    评价课程名称：
                    <input id="classNameToComment" type="text" >
                    <br>
                    <br>
                    <textarea id="commentContent" style="width:700px;height:200px;overflow:scroll;resize:none;" ></textarea>
                    <br>
                    <button id="sendCommentBtn" class="btn btn-primary">发送</button>
                </div>
            </div>
        </div>
        <!---->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">我的评价</h3>
            </div>
            <div class="panel-body">
                <div>
                    <div>
                        <table class="table table-striped">
                            <tr>
                                <td>id</td>
                                <td>content</td>
                                <td>timestamp</td>
                            </tr>
                            <tbody id="myContentList">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="sectionC" class="tab-pane fade">
        <div class="panel panel-primary margin-top-1">
            <div class="panel-heading">
                <h3 class="panel-title">搜索评价</h3>
            </div>
            <div class="panel-body">
                <div>
                    <div>
                    课程名：
                    <input type="text" id="searchClassName">
                    <button id="searchBtn" class="btn btn-primary">查询</button>
                    </div>
                    <br>
                    <table class="table table-striped">
                        <tr>
                            <td>name</td>
                            <td>content</td>
                            <td>timestamp</td>
                        </tr>
                        <tbody id="classCommentList">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div id="sectionD" class="tab-pane fade">
        <div class="panel panel-primary margin-top-1">
            <div class="panel-heading">
                <h3 class="panel-title">添加可评价课程</h3>
            </div>
            <div class="panel-body">
                <div>
                    <div>
                    课程名：
                    <input type="text" id="addClassName">
                    <button id="addClassBtn" class="btn btn-primary">添加</button>
                    </div>
                    <br>
                    <table class="table table-striped">
                        <tr>
                            <td>id</td>
                            <td>classname</td>
                        </tr>
                        <tbody id="classList">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="app.js"></script>

</html>
